import React from "react";
import { BannerCarousel } from "../../components/BannerCarousel";
import { PromoGrid } from "../../components/PromoGrid";
import { FloorSection } from "../../components/FloorSection";
import { ServiceLinks } from "../../components/ServiceLinks";
import { getBanners, getPromos, getFloors, getServices } from "../../lib/data";

export const revalidate = 300;

export default function HomePage({ params }: { params: { locale: string } }) {
  const locale = params.locale;
  const banners = getBanners(locale);
  const promos = getPromos(locale);
  const floors = getFloors(locale);
  const services = getServices(locale);

  return (
    <div className="space-y-12">
      <section className="mt-6">
        <div className="mx-auto max-w-screen-2xl px-4">
          <BannerCarousel items={banners} basePath={`/${locale}`} />
        </div>
      </section>

      <section>
        <div className="mx-auto max-w-screen-2xl px-4">
          <PromoGrid items={promos} basePath={`/${locale}`} />
        </div>
      </section>

      {floors.map((f) => (
        <FloorSection key={f.id} floor={f} basePath={`/${locale}`} />
      ))}

      <ServiceLinks items={services} />
    </div>
  );
}